<template>
  <div id="change">
      <!-- 这是修改密码 -->
    <el-container>
      <el-header><Header></Header></el-header>
      <el-main>
          <div class="personal_title">
              <p>{{$t("changePassword.Change")}}</p>
          </div>
          <div class="change_content">
              <div class="personal_content">
                <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="200px" class="demo-ruleForm">
                  <el-form-item :label="$t('changePassword.Old')" prop="oldPassword" :hide-required-asterisk='true'>
                    <el-input type="password" v-model="ruleForm.oldPassword" autocomplete="off" :placeholder="$t('changePassword.oldPass')" maxlength="12"></el-input>
                  </el-form-item>
                  <el-form-item :label="$t('changePassword.New')" prop="userPassword" :hide-required-asterisk='true'>
                    <el-input type="password" v-model="ruleForm.userPassword" autocomplete="off" :placeholder="$t('changePassword.newPassword')" maxlength="12"></el-input>
                  </el-form-item>
                  <el-form-item :label="$t('changePassword.ConfirmPass')" prop="userPasswordAgain" :hide-required-asterisk='true' >
                    <el-input type="password" v-model="ruleForm.userPasswordAgain" autocomplete="off" :placeholder="$t('changePassword.newPasswordAgain')" maxlength="12"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')" >{{$t("changePassword.Submit")}}</el-button>
                  </el-form-item>
                </el-form>
              </div>
          </div>
      </el-main>
      <el-footer><Footer></Footer></el-footer>
    </el-container>
  </div>
</template>

<script>
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
let Base64 = require('js-base64').Base64;
export default {
  data () {
    // 旧密码验证
    var oldPass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error(this.$t('changePassword.oldPass')));
        } else {
          if(value.match(/^[a-zA-Z0-9]{6,12}$/) == null) {
            callback(new Error(this.$t('share.rules.userPasswordLength')));
          } else {
            callback();
          }
        }
    };
    // 新密码验证
    var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error(this.$t('changePassword.newPassword')));
        } else {
          if (this.ruleForm.userPasswordAgain !== '') {
            this.$refs.ruleForm.validateField('userPasswordAgain');
          }
          if(value.match(/^[a-zA-Z0-9]{6,12}$/) == null) {
            callback(new Error(this.$t('share.rules.userPasswordLength')));
          } else {
            callback();
          }
        }
    };
    // 再次输入新密码验证
    var reinspection = (rule, value, callback) => {
      if (value === '') {
          callback(new Error(this.$t('changePassword.newPasswordAgain')));
        } else if (value !== this.ruleForm.userPassword) {
          callback(new Error(this.$t('Register.rules.userPasswordAgain')));
        } else {
          callback();
        }
    };
    return {
      loading: false, // 提交时加载状态
      ruleForm: {
        oldPassword: '',  //旧密码
        userPassword: '', //新密码
        userPasswordAgain: '', //再次输入新密码
        
      },
      // 注册验证
      rules: {
        oldPassword: [
          {required: true, validator: oldPass, trigger: 'blur' },
        ],
        userPassword: [
          {required: true, validator: validatePass, trigger: 'blur' },
        ],
        userPasswordAgain: [
          {required: true, validator: reinspection, trigger: 'blur' },
        ],
      },
    }
  },
  components: {
      Header,
      Footer
  },
  methods: {
      // 修改密码
    submitForm(ruleForm) {
      var _this = this;
      if(_this.$Cookie.getCookie("token") != undefined) {
        
        _this.$refs[ruleForm].validate((valid) => {
            if(valid){
              // if(_this.$Cookie.getCookie("userPassword") != undefined && _this.ruleForm.oldPassword == Base64.decode(_this.$Cookie.getCookie("userPassword"))) {
                // 旧密码和新密码不能一样
                if(_this.ruleForm.oldPassword != _this.ruleForm.userPassword) {
                  let id = _this.$Cookie.getCookie("userID");
                  // 请求后台数据
                  _this.$post('user/change/password',{
                      user_id: id,
                      password: Base64.encode(_this.ruleForm.oldPassword),
                      new_password: Base64.encode(_this.ruleForm.userPassword)
                  }).then(res=>{
                    if(res.code=="200"){
                      // 消息提示
                      _this.$MessageAlert(true,_this.$t('changePassword.success'),'success');
                      // 成功后重置输入框
                      _this.$refs[ruleForm].resetFields();
                      _this.$Cookie.removeCookie('token');
                      // 跳转到登陆页面
                      _this.$router.push({"path":"./login"});
                    } else if(res.code=="404"){
                      _this.$MessageAlert(true,res.msg,'error');
                    } else if(res.code=="400"){
                      _this.$MessageAlert(true,res.msg,'error');
                    } else {
                      _this.$MessageAlert(true,_this.$t('changePassword.error'),'error');
                    }
                  })
                  
                } else {
                  _this.$MessageAlert(true,_this.$t('changePassword.inequality'),'error');
                }
              // } else {
              //   _this.$MessageAlert(true,_this.$t('changePassword.incorrect'),'error');
              // }
            }
        });
      } else {
        // 没token值
        _this.$MessageAlert(true,_this.$t('share.Message.login'),'error');
        _this.$router.push({"path":'/'});
      }
    },

  },
}
</script>

<style lang="less" scoped>
// 布局容器
.el-header {
    font-size: 0;
}
.el-header, .el-footer {
  color: #333;
  text-align: center;
  height: auto!important;
  padding: 0px;
}
.el-main {
  color: #333;
  padding: 0px;
  // 计算减去头部和底部的高度，就是中间的高度
  min-height: calc(100vh - 61px - 220px)
}
.el-aside {
  color: #333;
  text-align: center;
}
// 布局容器结束
#change {
  min-width: 960px;
}
.personal_title {
  p {
    text-align: center;
    font-size: 25px;
    font-weight: 700;
    margin-top: 30px;
    margin-bottom: 30px;
  }
}
.el-icon-s-custom{
  font-size: 22px;
  margin-top: 20px;
  margin-bottom: 5px;
}
.el-icon-lock{
  font-size: 22px;
  margin-bottom: 5px;
}
.el-button{
  display: block;
  font-size: 20px;
  margin: auto;
  letter-spacing:2px;
  margin-top: 45px;
  background-color: #222;
  border: black;
  border-radius: 0px;
}
.el-button:hover {
  background-color: black;
  border: black;
}
.el-button--primary:focus {
  background-color: black;
  border: black;
}
.standby{
  padding-top: 30px;
  padding-bottom: 20px;
}
.standbyPass,.standbyId{
  height: 40px;
  font-size: 16px;
  text-decoration:underline;
}

#change {
  .change_content {
    margin: auto;
    margin-top: 0px;
    margin-bottom: 100px;
    border: 1px solid #ccc;
    border-radius: 2px;
    padding: 0px 35px;
    padding-top: 20px;
    padding-bottom: 10px;
    width: 470px;
    display: flex;
    flex-direction: column;
  }
  /deep/ .el-form-item__content{
    margin: 0px !important;
  }
  /deep/ .el-input input{
    text-indent: 1.3em;
  }
  /deep/ .el-form-item__label{
    text-align: left;
    margin-bottom: 0px;
    line-height: 35px;
  }
}


</style>